<template>
  <div class="prompts">
    <div class="page-center">
      <div class="page-title">发现最好用的Chat AI提示词</div>
      <div class="page-sub-title">
        最佳的Chat AI提示词集合,按类别、专业或用例查找最佳的Chat AI提示。
      </div>
      <div
        class="flex justify-center align-center mt-20"
        style="position: relative"
      >
        <a-button type="primary" @click="toPromptList" size="large"
          >发现提示词</a-button
        >
        <a-button
          size="large"
          @click="showSearchModal"
          style="margin-left: 20px"
          >搜索提示词</a-button
        >
      </div>

      <!-- 提示词分类 -->
      <div class="list-wrap" v-if="categoryList.length > 0">
        <div
          class="group"
          v-for="(group, groupIndex) of categoryList"
          :key="groupIndex"
        >
          <div class="group-name" v-if="group.sub && group.sub.length > 0">
            {{ group.cat_name }}
          </div>
          <a-row class="group-list" v-if="group.sub && group.sub.length > 0">
            <a-col
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(item, index) of group.sub"
              :key="index"
            >
              <div class="category-item" @click="onItemClick(item, 'category')">
                <div class="flex align-center">
                  <img
                    :src="item.cat_icon"
                    alt=""
                    class="category-item-icon"
                    v-if="item.cat_icon"
                  />
                  <div class="category-item-name">{{ item.cat_name }}</div>
                </div>
                <div class="category-item-intro">{{ item.cat_info }}</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <!-- 提示词分类 -->
      <div class="list-wrap" v-if="industryList.length > 0">
        <div class="group-name">行业</div>
        <a-row class="group-list">
          <a-col
            :xs="12"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="6"
            v-for="(item, index) of industryList"
            :key="index"
          >
            <div class="industry-item" @click="onItemClick(item, 'industry')">
              <div class="industry-item-name">{{ item.name }}</div>
              <div class="industry-item-intro">{{ item.introduce }}</div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />

    <PromptsSearch
      :visible="searchModalVisible"
      @onClose="searchModalVisible = false"
      @onSearchSelect="onSearchSelect"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import PromptsSearch from "../../components/PromptsSearch/index.vue";
export default defineComponent({
  name: "Prompts",
  components: { PromptsSearch },

  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      loginVisible: false,
      categoryList: [],
      industryList: [],

      searchModalVisible: false,
    });

    const getList = () => {
      request.get("/work_ai", "/user/promptWords/category", {}).then((res) => {
        if (res.result) {
          if (res.result.category) {
            state.categoryList = res.result.category;
            console.log(state.categoryList);
          }
          if (res.result.industry) {
            state.industryList = res.result.industry;
          }
        }
      });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const onItemClick = (item, type) => {
      let query = {};
      if (type == "category") {
        query = {
          cate: item.parent_id,
          subCat: item.id,
        };
      } else {
        query = {
          tab: 2,
          industry: item.id,
        };
      }
      router.push({
        name: "PromptsList",
        query,
      });
    };

    const toPromptList = () => {
      router.push({
        name: "PromptsList",
      });
    };

    const showSearchModal = () => {
      state.searchModalVisible = true;
    };

    const onSearchSelect = (item) => {
      let query = {
        cate: item.prompt_words_category.parent_id,
        subCat: item.prompt_words_category.id,
        id: item.id,
      };
      router.push({
        name: "PromptDetail",
        query,
      });
    };

    const init = () => {
      getList();
    };

    init();

    return {
      ...toRefs(state),
      loginCallback,
      onItemClick,
      toPromptList,
      showSearchModal,
      onSearchSelect,
    };
  },
});
</script>

<style lang="less" scoped>
.prompts {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden auto;

  .page-center {
    width: 80%;
    margin: 0 auto;

    .page-title {
      text-align: center;
      font-size: 36px;
      font-weight: 600;
      margin-top: 50px;
    }

    .page-sub-title {
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
      color: #555;
    }

    .list-wrap {
      margin-top: 40px;

      .list-title {
        font-size: 20px;
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 20px;
      }

      .group-name {
        font-size: 20px;
        font-weight: 600;
      }

      .group-list {
        margin-top: 16px;

        .category-item {
          padding: 15px 20px;
          background-color: #fff;
          border-radius: 6px;
          margin-right: 20px;
          margin-bottom: 20px;
          cursor: pointer;
          transition: 0.2s ease;
          box-shadow: 0 0px 10px #193e7b14;
          height: 115px;

          &:hover {
            -webkit-transform: translateY(-3px);
            -ms-transform: translateY(-3px);
            transform: translateY(-3px);
            -webkit-box-shadow: 0 0 6px #999;
            box-shadow: 0 0 6px #999;
            -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;

            .category-item-name {
              color: @primary-color;
            }
          }

          .category-item-icon {
            width: 36px;
            height: 36px;
            object-fit: cover;
            margin-right: 10px;
          }

          .category-item-name {
            font-size: 16px;
            font-weight: 600;
          }

          .category-item-intro {
            color: #999;
            font-size: 13px;
            margin-top: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }

        .industry-item {
          padding: 15px 20px;
          background-color: #fff;
          border-radius: 6px;
          margin-right: 20px;
          margin-bottom: 20px;
          cursor: pointer;
          transition: 0.2s ease;
          box-shadow: 0 0px 10px #193e7b14;
          height: 84px;

          &:hover {
            -webkit-transform: translateY(-3px);
            -ms-transform: translateY(-3px);
            transform: translateY(-3px);
            -webkit-box-shadow: 0 0 6px #999;
            box-shadow: 0 0 6px #999;
            -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;

            .industry-item-name {
              color: @primary-color;
            }
          }

          .industry-item-name {
            font-size: 16px;
            font-weight: 600;
          }

          .industry-item-intro {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999;
            font-size: 13px;
            margin-top: 8px;
          }
        }
      }
    }
  }
}
</style>
